<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Diagram Viewer Editor</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.4/js/aui.min.js"></script>
<script src="../new_common/cac.js" type="text/javascript"></script>
<script src="../onedrive_common/ac.js" type="text/javascript"></script>
<script src="../gdrive_common/gac.js" type="text/javascript"></script>
<script src="../../js/spin/spin.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Sets global environment variables
RESOURCE_BASE = '/resources/dia';
STENCIL_PATH = '/stencils';
SHAPES_PATH = '/shapes';

// Overrides browser language with Confluence user language
var lang = AC.getUrlParam('loc');

// Language is in the Connect URL
if (lang != null)
{
	var dash = lang.indexOf('-');
	
	if (dash >= 0)
	{
		mxLanguage = lang.substring(0, dash);
	}
}
</script>
<script type="text/javascript" src="/js/viewer.min.js"></script>
<script type="text/javascript" src="../vsdx/importer.js"></script>
<link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.9.12/css/aui.min.css" media="all">
<link rel="stylesheet" type="text/css" href="//aui-cdn.atlassian.com/aui-adg/6.0.4/css/aui.css">
<style type="text/css">
body {
	font-family:Arial, sans-serif;
	overflow:hidden;
	height:100%;
	width:100%;
	margin:0;
}
.thumbnail {
	box-sizing: border-box;
	height: 100px;
	width: 100px;
	border: 1px solid #CCCCCC;
	border-radius: 3px;
	line-height: 94px;
	text-align:center;
}
.thumbImg {
	vertical-align:middle;
	max-width: 96px;
	max-height: 96px;
}
</style>
</head>
<body class="aui-layout aui-theme-default" style="height:100%;">
	<div id="tab-navigation" class="aui-tabs horizontal-tabs">
	    <ul class="tabs-menu">
	    	<li class="menu-item active-tab">
	            <a href="#uploadTab"><strong>Upload Diagram</strong></a>
	        </li>
	        <li class="menu-item">
	            <a href="#oneDriveTab"><strong>OneDrive Diagram</strong></a>
	        </li>
	        <li class="menu-item">
	            <a href="#gDriveTab"><strong>Google Drive Diagram</strong></a>
	        </li>
	    </ul>
	    <div class="tabs-pane active-pane" id="uploadTab">
			<div style="bottom:0px;width:350px;border-right:1px solid #cccccc;position:absolute;top:40px;display:inline-block;">
				<form class="aui top-label" style="height:100%;top:0px;">
					<div class="field-group" style="padding-left:15px;">
						<label for="filenameUD">File name</label> 
						<input type="file" id="fileuploadUD" style="display: none">
						<input class="text macro-param-input" type="text" id="filenameUD" name="filename" disabled placeholder="Choose a file...">
						<button class="aui-button aui-button-primary ap-dialog-submit" id="filePickerUD">Choose</button>
						<div id="spinner-containerUD"></div>
						<div class="description">Diagram file name</div>
						<div class="error" id="filenameErrorUD"></div>
					</div>
					<div id="notUsedDU">
						<div class="field-group" style="padding-left:15px;">
							<label for="widthUD">Width</label> <input class="text medium-field" id="widthUD" value="800">
							<div class="description">Width of the viewer (px)</div>
							<div class="error" id="widthErrorUD"></div>
						</div>
						<div class="field-group" style="padding-left:15px;">
							<label for="heightUD">Height</label> <input class="text medium-field" id="heightUD" value="600">
							<div class="description">Height of the viewer (px)</div>
							<div class="error" id="heightErrorUD"></div>
						</div>
						<div class="field-group" style="padding-left:15px;">
							<input class="checkbox small-field" id="autoSizeUD" type="checkbox" >
							<label for="autoSizeUD" style="display:inline-block;font-size:12px">Automatically set the size of the viewer</label>
						</div>
					</div>
					<div class="error" id="errorMsgUD">
					</div>
				</form>
			</div>
			<div id="previewUD" style="bottom:0px;left:351px;position:absolute;top:40px;right:0px;display:inline-block;text-align: center;">
				<a style="display:block;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer"
					onclick="document.getElementById('fileuploadUD').click();">Choose a file...</a>
			</div>
	    </div>
	    <div class="tabs-pane" id="oneDriveTab">
		    <div style="bottom:0px;width:350px;border-right:1px solid #cccccc;position:absolute;top:40px;display:inline-block;">
				<form class="aui top-label" style="height:100%;top:0px;">
					<div class="field-group" style="padding-left:15px;">
						<label for="filenameOD">File name</label> 
						<input class="text macro-param-input" type="text" id="filenameOD" name="filename" disabled placeholder="Choose a file...">
						<button class="aui-button aui-button-primary ap-dialog-submit" id="filePickerOD" disabled>Choose</button>
						<div id="spinner-containerOD"></div>
						<div class="description">OneDrive file name</div>
						<div class="error" id="filenameErrorOD"></div>
					</div>
					<div id="notUsedOD">
						<div class="field-group" style="padding-left:15px;">
							<label for="widthOD">Width</label> <input class="text medium-field" id="widthOD" value="800">
							<div class="description">Width of the viewer (px)</div>
							<div class="error" id="widthErrorOD"></div>
						</div>
						<div class="field-group" style="padding-left:15px;">
							<label for="heightOD">Height</label> <input class="text medium-field" id="heightOD" value="600">
							<div class="description">Height of the viewer (px)</div>
							<div class="error" id="heightErrorOD"></div>
						</div>
						<div class="field-group" style="padding-left:15px;">
							<input class="checkbox small-field" id="autoSizeOD" type="checkbox" >
							<label for="autoSizeOD" style="display:inline-block;font-size:12px">Automatically set the size of the viewer</label>
						</div>
					</div>
					<div class="field-group" style="padding-left:15px;">
						<label for="thumbImgOD">Thumbnail</label>
						<div class="thumbnail">
							<img class="thumbImg" id="thumbImgOD">
						</div>
					</div>
					<div class="field-group" style="padding-left:15px;">
						<input type="checkbox" class="checkbox small-fiel" id="useDrawioOD">
						<label for="useDrawioOD" style="display:inline-block;">Preview in draw.io</label>
					</div>
				</form>
			</div>
			<div id="previewOD" style="bottom:0px;left:351px;position:absolute;top:40px;right:0px;display:inline-block;">
				<a style="display:block;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer"
					onclick="document.getElementById('filePickerOD').click();">Choose a file...</a>
			</div>
	    </div>
	    <div class="tabs-pane" id="gDriveTab">
			<div style="bottom:0px;width:350px;border-right:1px solid #cccccc;position:absolute;top:40px;display:inline-block;">
				<form class="aui top-label" style="height:100%;top:0px;">
					<div class="field-group" style="padding-left:15px;">
						<label for="filename">File name</label> 
						<input class="text macro-param-input" type="text" id="filenameGD" name="filename" disabled placeholder="Choose a file...">
						<button class="aui-button aui-button-primary ap-dialog-submit" id="filePickerGD" disabled>Choose</button>
						<div id="spinner-containerGD"></div>
						<div class="description">Google Drive file name</div>
						<div class="error" id="filenameErrorGD"></div>
						<div id="notUsedGD">
							<div class="field-group" style="padding-left:15px;">
								<label for="widthGD">Width</label> <input class="text medium-field" id="widthGD" value="800">
								<div class="description">Width of the viewer (px)</div>
								<div class="error" id="widthErrorGD"></div>
							</div>
							<div class="field-group" style="padding-left:15px;">
								<label for="heightGD">Height</label> <input class="text medium-field" id="heightGD" value="600">
								<div class="description">Height of the viewer (px)</div>
								<div class="error" id="heightErrorGD"></div>
							</div>
							<div class="field-group" style="padding-left:15px;">
								<input class="checkbox small-field" id="autoSizeGD" type="checkbox" >
								<label for="autoSizeGD" style="display:inline-block;font-size:12px">Automatically set the size of the viewer</label>
							</div>
						</div>
					</div>
					<div class="field-group" style="padding-left:15px;">
						<label for="thumbImg">Thumbnail</label>
						<div class="thumbnail">
							<img class="thumbImg" id="thumbImgGD">
						</div>
					</div>
					<div class="field-group" style="padding-left:15px;">
						<input type="checkbox" class="checkbox small-fiel" id="useDrawioGD">
						<label for="useDrawio" style="display:inline-block;">Preview in draw.io</label>
					</div>
				</form>
			</div>
			<div id="previewGD" style="bottom:0px;left:351px;position:absolute;top:40px;right:0px;display:inline-block;">
				<a style="display:block;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer"
					onclick="document.getElementById('filePickerGD').click();">Choose a file...</a>
			</div>
	    </div>
    </div>
<script src="../onedrive_common/editor.js" type="text/javascript"></script>
<script src="../gdrive_common/editor.js" type="text/javascript"></script>
<script src="../att_common/att-editor.js" type="text/javascript"></script>
<script type="text/javascript">
	AC.$('#notUsedOD').style.display = 'none';
	AC.$('#notUsedDU').style.display = 'none';
	AC.$('#notUsedGD').style.display = 'none';
	var head = document.getElementsByTagName('head')[0];

	var script = document.createElement("script");
	var attEditor, odEditor = null, gdEditor = null, currTab = 1;
	
	script.onload = function() 
	{
		AP.dialog.disableCloseOnSubmit();
		
		AP.events.on('dialog.submit', function()
		{
			var editor = currTab == 1? attEditor : (currTab == 2? odEditor : gdEditor);
			editor.doSubmit();
		});
		
		AP.dialog.getButton('submit').disable();
	};
	
	var connectUrl = AC.getBaseUrl() + '/atlassian-connect';
	script.src = 'https://connect-cdn.atl-paas.net/all.js';
	script.setAttribute('data-options', 'resize:false;margin:false');
	head.appendChild(script);

	var issueId = AC.getUrlParam('issueId');

	attEditor = new AttViewerEditor(function(selectedFile, selFileContent, editedFile, width, height, autoSize, isDrawio, aspect, onError)
	{
		//We only have add in Jira
		if (selectedFile != null)
		{
			//AP.request doesn't support loading binary data, so we store binary data as Base64 strings (which is loaded using DataURL)
			AC.uploadToJira(selFileContent, issueId, selectedFile.name, selectedFile.type, function(resp)
		    {
            	resp = JSON.parse(resp);
            	selectedFile.id = resp[0].id;
            	selectedFile.service = 'AttFile';
            	selectedFile.isDrawio = isDrawio;
            	selectedFile.aspect = aspect;
            	
        		AC.saveLink(issueId, selectedFile, function()
           	    {
           	    	AP.jira.refreshIssuePage();
        			AP.dialog.close();
           	    }, function(err)
           		{
         	    	//TODO Better error handling
           	    	alert('Saving failed: ' + ((err? err.message : '') || 'Unknow Error'));
           	    });
            }, onError);
		}
	}, null, 'UD', true);
	
	AJS.tabs.setup();
	
	var tabSubmitStatus = {};
	
	$('#tab-navigation').on('tabSelect', '.menu-item a', function(e, tabsMenu) 
	{
		var prevTab = currTab;
		
        switch ($(this).attr('href'))
        { 
	        case '#uploadTab':
	    		currTab = 1;
	    	break;
        	case '#oneDriveTab':
        		if (odEditor == null)
        		{
        			odEditor = new OneDriveEditor(function(selectedFile, width, height, autoSize, selFileContent)
     				{
     					var useDrawio = selectedFile.isDrawio || AC.$('#useDrawioOD').checked;

     					function doSaveLink()
        				{
         					selectedFile.isDrawio = useDrawio
         					selectedFile.service = 'OneDrive';
         					
         					AC.saveLink(issueId, selectedFile, function()
         			   	    {
         			   	    	AP.jira.refreshIssuePage();
         						AP.dialog.close();
         			   	    }, function(err)
         			   		{
         			 	    	//TODO Better error handling
         			   	    	alert('Saving failed: ' + ((err? err.message : '') || 'Unknow Error'));
         			   	    });
        				};
        				
        				if (useDrawio && selFileContent != null)
       					{
        					var modifiedTS = new Date(selectedFile.lastModifiedDateTime).getTime();
        					AC.uploadToJira(selFileContent, issueId, modifiedTS + '_' + selectedFile.name, 
        							'application/vnd.jgraph.mxfile', doSaveLink, doSaveLink); //On error save also as caching is not blocking
       					}
        				else
       					{
        					doSaveLink();
       					}
     				}, null, 'OD', true);
        		}
        		
        		currTab = 2;
        	break;
        	case '#gDriveTab':
        		if (gdEditor == null)
        		{
        			gdEditor = new GDriveEditor(function(selectedFile, width, height, autoSize, selFileContent)
        			{
        				var useDrawio = selectedFile.isDrawio || AC.$('#useDrawioOD').checked;

        				function doSaveLink()
        				{
	        				selectedFile.isDrawio = useDrawio
	        				selectedFile.service = 'GDrive';
	        				
	        				AC.saveLink(issueId, selectedFile, function()
	        		   	    {
	        		   	    	AP.jira.refreshIssuePage();
	        					AP.dialog.close();
	        		   	    }, function(err)
	        		   		{
	        		 	    	//TODO Better error handling
	        		   	    	alert('Saving failed: ' + ((err? err.message : '') || 'Unknow Error'));
	        		   	    });
        				};
        				
        				if (useDrawio && selFileContent != null)
       					{
        					var modifiedTS = new Date(selectedFile.modifiedDate).getTime();
        					AC.uploadToJira(selFileContent, issueId, modifiedTS + '_' + selectedFile.title, 
        							'application/vnd.jgraph.mxfile', doSaveLink, doSaveLink); //On error save also as caching is not blocking
       					}
        				else
       					{
        					doSaveLink();
       					}
        			}, null, 'GD', true);
				}
        		
        		currTab = 3;
        	break;
        }
        
        AP.dialog.getButton('submit').isEnabled(function(enabled)
        {
        	tabSubmitStatus[prevTab] = enabled;
        	
        	if (tabSubmitStatus[currTab])
       		{
        		AP.dialog.getButton('submit').enable();
       		}
        	else
       		{
        		AP.dialog.getButton('submit').disable();
       		}
       	});
    });
</script>
</body>
</html>
